<template>
  <div class="hello">
    <!--<p v-for="m in obj">{{m.price}}</p>-->
    <ul >
      <li v-for="m in obj">
        <div>{{m.title}}</div>
        <div>{{m.price}}</div>
        <div><img :src="m.img"/></div>
      </li>
    </ul>
    <table v-for="c in obj"><td>{{c.title}}</td></table>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        obj: []
      }
    },
    mounted() {
      var _this = this;
      this.axios.get('../../static/data.json')
        .then(function (response) {
          console.log(response.data.goods);
          var arr = response.data.goods;
          for (var i = 0; i < arr.length; i++) {
            _this.obj.push(arr[i]);
          }
        }, response => {
          console.log("error:"+response);
        })
        .catch(function (response) {
          console.log(response);
        });
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #hello ul li{
    display: inline-block;
  }
</style>
